<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
	
    <title>彩妆  商城</title>
	
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="/Shopping/static/css/bootstrap.min.css"  type="text/css">
	
	<!-- Custom CSS -->
    <link rel="stylesheet" href="/Shopping/static/css/style.css">
	<!-- jQuery and Modernizr-->
	<script src="/Shopping/static/js/jquery-2.1.1.js"></script>
	<link rel="stylesheet" href="/Shopping/static/css/font-slider.css"  type="text/css">
	<!-- Core JavaScript Files -->  	 
    <script src="/Shopping/static/js/bootstrap.min.js"></script>
    <script src="/Shopping/static/lib/layer/2.4/layer.js"></script>
	
</head>
<body>
	<!--Top-->
	<nav id="top">
		<div class="container">
			<div class="row">
			
				<ul class="top-link">
						<li id="login"><a href="/Shopping/Account/account"><span class="glyphicon glyphicon-user"></span> 登陆</a></li>
						<li  id="join"><a href="/Shopping/Join/join"><span class="glyphicon glyphicon-envelope"></span> 注册</a></li>
						<li ><a href="/Shopping/PersonInfo/personInfo" id="account"><span class="glyphicon glyphicon-user"></span> 我的账户中心</a></li>
					</ul>
				</div>	
					
		</div>

	</nav>
	<!--Header-->
<header class="container">
		<div class="row">
			<div class="col-md-4">
				<div id="logo">
					<font size="10" color="#cc3300" face="宋体"><i><strong>Shoopping</strong></i>
				</font></div>
			</div>
			<div class="col-md-4">
				<form class="form-search">  
					<input type="text" class="input-medium search-query">  
					<button type="button" class="btn"><span class="glyphicon glyphicon-search"></span></button>  
				</form>
			</div>
			<div class="col-md-4">
				<div id="cart"><a id="shopcart" class="btn btn-1"><span class="glyphicon glyphicon-shopping-cart"></span>购物车</a></div>
			</div>
		</div>
	</header>
	<!--Navigation-->
    <nav id="menu" class="navbar">
		<div class="container">
			<div class="navbar-header"><span id="heading" class="visible-xs">目录</span>
			  <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
			</div>
			<div class="collapse navbar-collapse navbar-ex1-collapse">
				<ul class="nav navbar-nav">
					<li id="index"><a>首页</a></li>
		
					<c:forEach items="${typeList}" var="type">
						
						<li><a >${type.typeName}</a></li>
					
					</c:forEach>
					
				
						<div class="dropdown-menu">
							<div class="dropdown-inner">
								<ul class="list-unstyled">
									<li><a href="category.html"></a></li>
										<li><a href="category.html"></a></li>
									<li><a href="category.html"></a></li>
								</ul>
							</div>
						</div>
					</li>

				</ul>
			</div>
		</div>
	</nav>
<!--//////////////////////////////////////////////////-->
	<!--///////////////////HomePage///////////////////////-->
	<!--//////////////////////////////////////////////////-->
    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >网页模板</a></div>
	<div id="page-content" class="home-page">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<!-- Carousel -->
					<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
						
						<div class="carousel-inner">
							<div class="item active">
								<img src="/Shopping/static/img/1.jpg" alt="First slide">
								<!-- Static Header -->
								<div class="header-text hidden-xs">
									<div class="col-md-12 text-center">
									</div>
								</div><!-- /header-text -->
							</div>
							<div class="item">
								<img src="/Shopping/static/img/3.jpg" alt="Second slide">
								<!-- Static Header -->
								<div class="header-text hidden-xs">
									<div class="col-md-12 text-center">
									</div>
								</div><!-- /header-text -->
							</div>
							<div class="item">
								<img src="/Shopping/static/img/2.jpg" alt="Third slide">
								<!-- Static Header -->
								<div class="header-text hidden-xs">
									<div class="col-md-12 text-center">
									</div>
								</div><!-- /header-text -->
							</div>
								<div class="item">
								<img src="/Shopping/static/img/5.jpg" alt="Third slide">
								<!-- Static Header -->
								<div class="header-text hidden-xs">
									<div class="col-md-12 text-center">
									</div>
								</div><!-- /header-text -->
							</div>
								<div class="item">
								<img src="/Shopping/static/img/4.jpg" alt="Third slide">
								<!-- Static Header -->
								<div class="header-text hidden-xs">
									<div class="col-md-12 text-center">
									</div>
								</div><!-- /header-text -->
							</div>
						</div>
						<!-- Controls -->
						<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left"></span>
						</a>
						<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right"></span>
						</a>
					</div><!-- /carousel -->
				</div>
			</div>
			<div class="row">
				<div class="banner">
					<div class="col-sm-4">
						<img src="/Shopping/static/img/1.jpg" />
					</div>
					<div class="col-sm-4">
						<img src="/Shopping/static/img/3.jpg" />
					</div>
					<div class="col-sm-4">
						<img src="/Shopping/static/img/2.jpg" />
					</div>

				</div>
			</div>
			<div class="row">
				<div class="col-lg-12">
					<div class="heading"><h2>特别推荐</h2></div>
					<div class="products">
						
						<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
							<div class="product">
								<div class="image"><a href="/Shopping/Product/product?productName=Chanel58"><img src="/Shopping/static/img/Chanel58.JPG" /></a></div>
								<div class="buttons">
				
								</div>
								<div class="caption">
									<div class="name"><h3><a href="/Shopping/Product/product?productName=Chanel58">Chanel58</a></h3></div>
									<div class="price">￥290</div>
									<div class="rating"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span></div>
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
							<div class="product">
								<div class="image"><a href="/Shopping/Product/product?productName=Armani506"><img src="/Shopping/static/img/Armani506.JPG" /></a></div>
								<div class="buttons">
									
									
								</div>
								<div class="caption">
									<div class="name"><h3><a href="/Shopping/Product/product?productName=Armani506">Armani506</a></h3></div>
									<div class="price">￥250</div>
									<div class="rating"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span></div>
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
							<div class="product">
								<div class="image"><a href="/Shopping/Product/product?productName=YSL416"><img src="/Shopping/static/img/YSL416.JPG" /></a></div>
								<div class="buttons">
									
								</div>
								<div class="caption">
									<div class="name"><h3><a href="/Shopping/Product/product?productName=YSL416">YSL416</a></h3></div>
									<div class="price">￥300</div>
									<div class="rating"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span></div>
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
							<div class="product">
								<div class="image"><a href="/Shopping/Product/product?productName=Armani405"><img src="/Shopping/static/img/Armani405.JPG" /></a></div>
								<div class="buttons">
								
							
								</div>
								<div class="caption">
									<div class="name"><h3><a href="/Shopping/Product/product?productName=Armani405">Armani405</a></h3></div>
									<div class="price">￥240</div>
										<div class="rating"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="banner">
					<div class="col-sm-6">
						<img src="/Shopping/static/img/4.jpg" />
					</div>
					<div class="col-sm-6">
						<img src="/Shopping/static/img/5.jpg" />
					</div>
				</div>
			</div>
			
		</div>
	</div>			
	<div id="page-content" class="single-page" >
		<div class="container" id="test">
			
			<div class="row">
				<div id="main-content" class="col-md-8">
					<div class="row">
						<div class="col-md-12">
							<div class="products" id="one">
							
						
								
								
								
									
							</div>
						</div>
						
					</div>
					</div>
					
			</div>
	
					<div class="row">
						<div class="col-md-12">
							<div class="products" id="two">
								
								
								
							</div>
						</div>
					</div>		
			</div>
			</div>
	
			
	
</body>
<script>
$(document).ready(function(){
	//$("#test").html('');	
	clickIndex();
	chooseType();
	clickShopcart();
	show();
	clickMyaccount();
});
	function chooseType(){
		var liArr = $("li");
		$.each(liArr,function(index){
			$(this).click(function(){
				var typeName = $(this).find("a").text();//分类名称
				if(typeName=='首页'){
					
				} else {
					
				
				$.ajax({
					url:"/Shopping/Category/getProduct",
					type:"get",
					data:{"typeName":typeName},
					contentType:"application/json;charset=utf-8",
					dataType:"json",
					async:false,
					success:function(productList){
						//alert('ss');
						//$("#test").html('');
						$("#page-content").hide();
						$("#one").html('');
						$("#two").html('');
						$.each(productList,function(index,value){
							
							$("#two").append(
									
											'<div class="col-lg-4 col-md-4 col-xs-12">'+
												'<div class="product">'+
													'<div class="image"><img src="/Shopping/static/img/'+value.imgAddress+'"/></div>'+
													'<div class="buttons">'+
														'<a class="cart" href="/Shopping/Product/product?productName='+value.productName+'"><span class="glyphicon glyphicon-shopping-cart"></span></a>'+
													'</div>'+
													'<div class="caption">'+
														'<div class="name">'+value.productName+'</div>'+
														'<div class="price">￥'+value.price+'</div>'+
														
													'</div>'+
												'</div>'+
											'</div>'
							
											);
							
							
						});
						
						
						
					}	
							
						
												
							
					
				});}
				imgClick();
				
			});
		});
	}
	function imgClick(){ //图片点击事件
		var productList = $(".image");
	
		$.each(productList,function(index){
			
			$(this).click(function(){
				
				var productName = $(this).next().next().find('.name').text();
				window.location.href="/Shopping/Product/product?productName="+productName;
			});	
		});
		
	
	}

	function clickShopcart(){//点击购物车按钮
		$("#shopcart").click(function(){
			if(!validateLogin()){ //未登录
				layer.msg('请您先登录',{icon:5,time:2000});
			} else {
				window.location.href="/Shopping/Shopcart/shopcart"
			}
		});
	}
	function validateLogin(){ //验证用户是否登录
		var res = false;
		$.ajax({
			url:"/Shopping/Login/validateLogin",
			type:"get",
			data:{},
			dataType:"json",
			async:false,
			success:function(data)
			{
				if(data.res==1){
				    //layer.msg('用户已登陆',{icon:1,time:2000});
					//window.location.href="${prePage}";
					res = true;
				}
				if(data.res==0){
				
					//layer.msg('用户未登陆',{icon:0,time:2000});
					res = false;
				}
			},
			error:function(){
				alert('error');
			}
			
		});
		return res;
	}
	function clickIndex(){ //点击首页按钮
		$("#index").click(function(){
			$("#one").html('');
			$("#two").html('');
			$("#page-content").show();
		});
		
		
	}
	function show(){ //
		$("#account").hide();
		$("login").hide();
		$("join").hide();
		if(validateLogin()){
			$("#account").show();	
			$("#login").hide();
			$("#join").hide();
		} else {
			$("#login").show();
			$("#join").show();
		}
	}
	
	function clickMyaccount(){//点击我的账户
		$("#account").click(function(){
			if(!validateLogin()){ //未登录
				layer.msg('请您先登录',{icon:5,time:2000});
			} else {
				window.location.href="/Shopping/PersonInfo/PersonInfo"
			}
		});
	}
</script>
</html>
